<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 写在标签内 和标签名以一个空格分隔的叫做属性 (属性名="属性值") -->
    <div id="demo" class="one two three"></div>
</body>
<script>

    // 所有的节点都是对象类型(对事物的特征(属性)和行为(方法)进行描述)

    // 属性节点(html属性)

    // 如何获取属性节点
    // 1. 属性节点 存在于 标签内 => 依存于元素节点 (先获取元素节点 在通过元素节点获取属性节点)

    /* var demo = document.getElementById("demo"); // 获取元素节点
    console.log(demo, typeof demo);

    // attribute 属性
    // 根据元素节点 获取 属性节点
    var attr_class = demo.getAttributeNode("class");
    console.log(attr_class, typeof attr_class);

    // 操作属性 (取值和赋值)
    console.log(attr_class.nodeName);   // 属性节点的 节点的名称(属性名)
    console.log(attr_class.nodeValue);  // 属性节点的 节点的值(属性值)

    // 节点的属性值 可以取值,也可以赋值
    attr_class.nodeValue = "first second third";
    console.log(demo); */


    // 官方提供了 快捷操作属性的方法

    // Element.setAttribute(key,val)   对应属性名设置属性值 (没有就新增 有就修改)
    // Element.getAttribute(key)       对应属性名获取属性值
    // Element.removeAttribute(key)       对应属性名删除属性值

    var demo = document.getElementById("demo");
    demo.setAttribute("title", "hello");
    demo.setAttribute("title", "world");

    console.log(demo.getAttribute("id"));
    console.log(demo.getAttribute("class"));
    console.log(demo.getAttribute("title"));

    demo.removeAttribute("id");
    demo.removeAttribute("class");
    demo.removeAttribute("title");

    console.log(demo);




</script>

</html>